<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表页</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
  </head>
  <body>
    <div class="list">
      <div class="header1">
        <div class="jd-container">
          <div class="fl">
            <i class="fl iconfont icon-ditu-dibiao"></i>
            <span class="fl">广州</span>
          </div>
          <div class="fl">切换至企业版</div>
          <ul class="fr">
            <li>
              <span>你好，请登录</span>
              <a href="./register.html">免费注册</a>
            </li>
            <li>我的订单</li>
            <li>我的京东</li>
            <li>企业采购</li>
            <li>商家服务</li>
            <li>网站导航</li>
            <li>手机京东</li>
            <li>网站无障碍</li>
          </ul>
        </div>
      </div>
      <div class="header2">
        <div class="jd-container">
          <div id="logo" class="logo fl">
            <h1 class="logo_tit">
              <img
                src="//img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png"
                style="
                  display: block;
                  height: 120px;
                  margin: 0px auto;
                  width: 100%;
                "
              />
            </h1>
          </div>
          <!-- 搜索 -->
          <div class="search fl">
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="请输入内容"
                aria-describedby="button-addon4"
              />
              <div class="input-group-append" id="button-addon4">
                <button class="btn btn-outline-secondary" type="button">
                  Button
                </button>
                <button class="btn btn-outline-secondary" type="button">
                  搜索
                </button>
              </div>
            </div>
            <div id="hotwords">
              <a class="red" href="" id="specHotWord" target="_blank"
                >装扮理想家</a
              >
              <a href="" target="_blank">荣耀手机</a>
              <a href="" target="_blank">领大额券</a>
              <a href="" target="_blank">京造家装</a>
              <a href="" target="_blank">300减50</a>
              <a href="" target="_blank">iPhone14</a>
              <a href="" target="_blank">OPPO上新</a>
              <a href="" target="_blank">卡地亚</a>
            </div>
          </div>
          <!-- 购物车 -->
          <div id="settleup" class="dropdown fl">
            <div class="cw-icon">
              <i class="iconfont icon-gouwuchekong"></i>
              <a href="">我的购物车</a>
              <i class="ci-count" id="shopping-amount">0</i>
            </div>
          </div>
          <!-- 右边的图片 -->
          <div id="treasure" class="fr"></div>
        </div>
      </div>

      <!-- 分类 -->

      <!-- 排序 和排序 -->
      <div class="nav_content">
        <div class="jd-container">
          <nav class="type">
            <div>分类：</div>
            <ul class="nav nav-tabs fenlei" id="type-list" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active">全部</button>
                </li>
              <!-- 根据数据渲染 -->
              <!-- <li class="nav-item" role="presentation">
                <button class="nav-link active">全部</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link">时尚单品</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link">热销产品</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link">最优选项</button>
              </li> -->
            </ul>
          </nav>
          <nav class="sort">
            <div>排序：</div>
            <ul class="nav nav-tabs" id="sort-list" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active mr">默认</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link sl">按销量</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link jg">按价格</button>
              </li>
            </ul>
          </nav>
        </div>
      </div>

      <!-- 列表 -->
      <div class="more">
        <div class="jd-container">
          <div class="list">
            <!-- <div class="card list-item">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/175323/6/4506/96225/6078ebd7E423ae857/e5fea477eb56e65c.jpg.avif" class="card-img-top" alt="...">
                <div class="card-body">
                  <p class="card-text">美的（Midea）LED便携充电小台灯书桌学习阅读灯学生宿舍卧室床头灯学习台灯
                  </p>
                  <a href="#" class="">
                    ￥ <b>200</b>
                  </a>
                </div>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="page">
        <div class="jd-container">
          <nav class="navigation" aria-label="Page navigation example">
            <ul class="pagination">
              <!-- <li class="page-item Previous">
                <a
                  class="page-link"
                  href="javascript:void(0);"
                  aria-label="Previous"
                >
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active page-item">
                <a class="page-link" href="javascript:void(0);">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="javascript:void(0);">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="javascript:void(0);">3</a>
              </li>
              <li class="page-item Next">
                <a
                  class="page-link"
                  href="javascript:void(0);"
                  aria-label="Next"
                >
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li> -->
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </body>
</html>
